C.S.Burner 🪙 ━►🔥GIT Node
Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / call / tabs / CallVoicemailTab.vue
Displaying Raw • Download
meshchatx/src/frontend/components/call/tabs/CallVoicemailTab.vue 65ca9ddc823fcc2c8f8653c553b944b85db0875f (65ca9ddc) Text, 26.41 KB
T8b949e<!-- SPDX-License-Identifier: 0BSD -->
Tff7b72<templateTff7b72>
Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffactiveTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffflex-1 flex flex-col max-w-3xl mx-auto w-full pt-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffmb-4Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffrelativeTa5d6ff"Tff7b72>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffvoicemailSearchTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"
Te6edf3placeholder=Ta5d6ff"Ta5d6ffSearch voicemails...Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffblock w-full rounded-lg border-0 py-2 pl-10 text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-zinc-800 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm dark:bg-zinc-900Ta5d6ff"
@Te6edf3input=Ta5d6ff"Ta5d6ffonSearchInputTa5d6ff"
Tff7b72/>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffpointer-events-none absolute inset-y-0 left-0 flex items-center pl-3Ta5d6ff"Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffmagnifyTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-5 text-gray-400Ta5d6ff" Tff7b72/>
Tff7b72</div>
Tff7b72</div>
Tff7b72</div>
T8b949e<!-- Voicemail Settings Card -->
Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffconfigTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffmb-4 border-b border-gray-200 dark:border-zinc-800 overflow-hiddenTa5d6ff"Tff7b72>
Tff7b72<button
Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffw-full px-4 py-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-zinc-800/50 transition-colorsTa5d6ff"
@Te6edf3click=Ta5d6ff"Ta5d6ffisVoicemailSettingsExpanded = !isVoicemailSettingsExpandedTa5d6ff"
Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-2Ta5d6ff"Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffcogTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-5 text-blue-500Ta5d6ff" Tff7b72/>
Tff7b72<h3 Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-bold text-gray-900 dark:text-white uppercase tracking-widerTa5d6ff"Tff7b72>
Voicemail Settings
Tff7b72</h3>
Tff7b72</div>
Tff7b72<MaterialDesignIcon
Te6edf3:icon-name=Ta5d6ff"Ta5d6ffisVoicemailSettingsExpanded ? Ta5d6ff'Ta5d6ffchevron-upTa5d6ff'Ta5d6ff : Ta5d6ff'Ta5d6ffchevron-downTa5d6ff'Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffsize-5 text-gray-400Ta5d6ff"
Tff7b72/>
Tff7b72</button>
Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffisVoicemailSettingsExpandedTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffpx-4 pb-6 space-y-6Ta5d6ff"Tff7b72>
T8b949e<!-- Status Banner -->
Tff7b72<div
Te6edf3v-if=Ta5d6ff"Ta5d6ff!voicemailStatus.has_espeakTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffp-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg flex gap-3 items-startTa5d6ff"
Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffalertTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-5 text-amber-600 dark:text-amber-400 shrink-0Ta5d6ff" Tff7b72/>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs text-amber-800 dark:text-amber-200Ta5d6ff"Tff7b72>
Tff7b72<p Te6edf3class=Ta5d6ff"Ta5d6fffont-bold mb-1Ta5d6ff"Tff7b72>Dependencies MissingTff7b72</p>
Tff7b72<pTff7b72>Voicemail requires `espeak-ng` to generate greetings. Please install it on your system.Tff7b72</p>
Tff7b72</div>
Tff7b72</div>
T8b949e<!-- Enabled Toggle -->
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-betweenTa5d6ff"Tff7b72>
Tff7b72<divTff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-semibold text-gray-900 dark:text-whiteTa5d6ff"Tff7b72>Enable VoicemailTff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-xs text-gray-500 dark:text-zinc-400Ta5d6ff"Tff7b72>
Accept calls automatically and record messages
Tff7b72</div>
Tff7b72</div>
Tff7b72<button
Te6edf3:disabled=Ta5d6ff"Ta5d6ff!voicemailStatus.has_espeakTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffrelative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden disabled:opacity-50 disabled:cursor-not-allowedTa5d6ff"
Te6edf3:class=Ta5d6ff"Ta5d6ffconfig.voicemail_enabled ? Ta5d6ff'Ta5d6ffbg-blue-600Ta5d6ff'Ta5d6ff : Ta5d6ff'Ta5d6ffbg-gray-200 dark:bg-zinc-700Ta5d6ff'Ta5d6ff"
@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate-configTa5d6ff'Ta5d6ff, { voicemail_enabled: !config.voicemail_enabled })Ta5d6ff"
Tff7b72>
Tff7b72<span
Te6edf3class=Ta5d6ff"Ta5d6ffpointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-outTa5d6ff"
Te6edf3:class=Ta5d6ff"Ta5d6ffconfig.voicemail_enabled ? Ta5d6ff'Ta5d6fftranslate-x-5Ta5d6ff'Ta5d6ff : Ta5d6ff'Ta5d6fftranslate-x-0Ta5d6ff'Ta5d6ff"
Tff7b72>Tff7b72</span>
Tff7b72</button>
Tff7b72</div>
T8b949e<!-- Greeting Text -->
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<label Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-bold text-gray-500 dark:text-zinc-400 uppercase tracking-tighterTa5d6ff"
Tff7b72>Greeting MessageTff7b72</label
>
Tff7b72<textarea
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.voicemail_greetingTa5d6ff"
Te6edf3rows=Ta5d6ff"Ta5d6ff3Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffblock w-full rounded-lg border-0 py-2 text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-zinc-800 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-zinc-900Ta5d6ff"
Te6edf3placeholder=Ta5d6ff"Ta5d6ffEnter greeting text...Ta5d6ff"
@Te6edf3input=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffpatch-configTa5d6ff'Ta5d6ff, { voicemail_greeting: Te6edf3$event.target.valueTa5d6ff })Ta5d6ff"
Tff7b72>Tff7b72</textarea>
T8b949e<!-- TTS Settings -->
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffgrid grid-cols-2 gap-3 mt-2Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-1Ta5d6ff"Tff7b72>
Tff7b72<label
Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-tighterTa5d6ff"
Tff7b72>{{ Te6edf3$t("call.tts_speed") }}Tff7b72</label
>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.voicemail_tts_speedTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffnumberTa5d6ff"
Te6edf3min=Ta5d6ff"Ta5d6ff80Ta5d6ff"
Te6edf3max=Ta5d6ff"Ta5d6ff450Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffblock w-full rounded-lg border-0 py-1 text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-zinc-800 focus:ring-2 focus:ring-inset focus:ring-blue-600 text-xs dark:bg-zinc-900Ta5d6ff"
@Te6edf3change=Ta5d6ff"
Ta5d6ff Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate-configTa5d6ff'Ta5d6ff, {
voicemail_tts_speed: Number(Te6edf3$event.target.valueTa5d6ff),
})
Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-1Ta5d6ff"Tff7b72>
Tff7b72<label
Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-tighterTa5d6ff"
Tff7b72>{{ Te6edf3$t("call.tts_pitch") }}Tff7b72</label
>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.voicemail_tts_pitchTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffnumberTa5d6ff"
Te6edf3min=Ta5d6ff"Ta5d6ff0Ta5d6ff"
Te6edf3max=Ta5d6ff"Ta5d6ff99Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffblock w-full rounded-lg border-0 py-1 text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-zinc-800 focus:ring-2 focus:ring-inset focus:ring-blue-600 text-xs dark:bg-zinc-900Ta5d6ff"
@Te6edf3change=Ta5d6ff"
Ta5d6ff Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate-configTa5d6ff'Ta5d6ff, {
voicemail_tts_pitch: Number(Te6edf3$event.target.valueTa5d6ff),
})
Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-1Ta5d6ff"Tff7b72>
Tff7b72<label
Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-tighterTa5d6ff"
Tff7b72>{{ Te6edf3$t("call.tts_word_gap") }}Tff7b72</label
>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.voicemail_tts_word_gapTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffnumberTa5d6ff"
Te6edf3min=Ta5d6ff"Ta5d6ff0Ta5d6ff"
Te6edf3max=Ta5d6ff"Ta5d6ff100Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffblock w-full rounded-lg border-0 py-1 text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-zinc-800 focus:ring-2 focus:ring-inset focus:ring-blue-600 text-xs dark:bg-zinc-900Ta5d6ff"
@Te6edf3change=Ta5d6ff"
Ta5d6ff Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate-configTa5d6ff'Ta5d6ff, {
voicemail_tts_word_gap: Number(Te6edf3$event.target.valueTa5d6ff),
})
Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-1Ta5d6ff"Tff7b72>
Tff7b72<label
Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-tighterTa5d6ff"
Tff7b72>{{ Te6edf3$t("call.tts_voice") }}Tff7b72</label
>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.voicemail_tts_voiceTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6fftextTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffblock w-full rounded-lg border-0 py-1 text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-zinc-800 focus:ring-2 focus:ring-inset focus:ring-blue-600 text-xs dark:bg-zinc-900Ta5d6ff"
@Te6edf3change=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate-configTa5d6ff'Ta5d6ff, { voicemail_tts_voice: Te6edf3$event.target.valueTa5d6ff })Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex justify-between items-centerTa5d6ff"Tff7b72>
Tff7b72<p Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] text-gray-500 dark:text-zinc-500Ta5d6ff"Tff7b72>
This text will be converted to speech using eSpeak NG.
Tff7b72</p>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex gap-2Ta5d6ff"Tff7b72>
Tff7b72<button
Te6edf3:disabled=Ta5d6ff"Ta5d6ff!voicemailStatus.has_espeak || isGeneratingGreetingTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] bg-gray-100 dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 px-3 py-1 rounded-full font-bold hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors disabled:opacity-50Ta5d6ff"
@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffsave-and-generateTa5d6ff'Ta5d6ff)Ta5d6ff"
Tff7b72>
{{ isGeneratingGreeting ? "Generating..." : "Save & Generate" }}
Tff7b72</button>
Tff7b72</div>
Tff7b72</div>
Tff7b72</div>
T8b949e<!-- Custom Greeting Upload -->
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<label Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-bold text-gray-500 dark:text-zinc-400 uppercase tracking-tighterTa5d6ff"
Tff7b72>Custom Audio GreetingTff7b72</label
>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-3 flex-wrapTa5d6ff"Tff7b72>
Tff7b72<input
Te6edf3ref=Ta5d6ff"Ta5d6ffgreetingUploadTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6fffileTa5d6ff"
Te6edf3accept=Ta5d6ff"Ta5d6ffaudio/*Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffhiddenTa5d6ff"
@Te6edf3change=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupload-greetingTa5d6ff'Ta5d6ff, Te6edf3$eventTa5d6ff)Ta5d6ff"
Tff7b72/>
Tff7b72<button
Te6edf3:disabled=Ta5d6ff"Ta5d6ffisUploadingGreeting || voicemailStatus.is_greeting_recordingTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6fftext-xs bg-gray-100 dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 px-4 py-2 rounded-lg font-bold hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors disabled:opacity-50 flex items-center gap-2Ta5d6ff"
@Te6edf3click=Ta5d6ff"Te6edf3$refs.greetingUpload.clickTa5d6ff()Ta5d6ff"
Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffuploadTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-4Ta5d6ff" Tff7b72/>
{{ isUploadingGreeting ? "Uploading..." : "Upload Audio File" }}
Tff7b72</button>
Tff7b72<button
Te6edf3class=Ta5d6ff"Ta5d6fftext-xs px-4 py-2 rounded-lg font-bold transition-colors flex items-center gap-2Ta5d6ff"
Te6edf3:class=Ta5d6ff"
Ta5d6ff voicemailStatus.is_greeting_recording
? Ta5d6ff'Ta5d6ffbg-red-500 text-white animate-pulseTa5d6ff'
Ta5d6ff : Ta5d6ff'Ta5d6ffbg-gray-100 dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 hover:bg-gray-200 dark:hover:bg-zinc-700Ta5d6ff'
Ta5d6ff Ta5d6ff"
@Te6edf3click=Ta5d6ff"
Ta5d6ff voicemailStatus.is_greeting_recording
? Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffstop-recording-greetingTa5d6ff'Ta5d6ff)
: Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffstart-recording-greetingTa5d6ff'Ta5d6ff)
Ta5d6ff"
Tff7b72>
Tff7b72<MaterialDesignIcon
Te6edf3:icon-name=Ta5d6ff"Ta5d6ffvoicemailStatus.is_greeting_recording ? Ta5d6ff'Ta5d6ffstopTa5d6ff'Ta5d6ff : Ta5d6ff'Ta5d6ffmicrophoneTa5d6ff'Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffsize-4Ta5d6ff"
Tff7b72/>
{{ voicemailStatus.is_greeting_recording ? "Stop Recording" : "Record from Mic" }}
Tff7b72</button>
Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffvoicemailStatus.has_greetingTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-2Ta5d6ff"Tff7b72>
Tff7b72<button
Te6edf3class=Ta5d6ff"Ta5d6fftext-xs bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 px-4 py-2 rounded-lg font-bold hover:bg-red-200 dark:hover:bg-red-900/50 transition-colors flex items-center gap-2Ta5d6ff"
@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffdelete-greetingTa5d6ff'Ta5d6ff)Ta5d6ff"
Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffdeleteTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-4Ta5d6ff" Tff7b72/>
Remove Greeting
Tff7b72</button>
Tff7b72<button
Te6edf3class=Ta5d6ff"Ta5d6fftext-xs bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-4 py-2 rounded-lg font-bold hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors flex items-center gap-2Ta5d6ff"
@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffplay-greetingTa5d6ff'Ta5d6ff)Ta5d6ff"
Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3:icon-name=Ta5d6ff"Ta5d6ffisPlayingGreeting ? Ta5d6ff'Ta5d6ffstopTa5d6ff'Ta5d6ff : Ta5d6ff'Ta5d6ffplayTa5d6ff'Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-4Ta5d6ff" Tff7b72/>
{{ isPlayingGreeting ? "Stop Preview" : "Preview" }}
Tff7b72</button>
Tff7b72</div>
Tff7b72<div v-else Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] text-gray-500 dark:text-zinc-500 italicTa5d6ff"Tff7b72>
No custom greeting uploaded (default text will be used)
Tff7b72</div>
Tff7b72</div>
Tff7b72<p Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] text-gray-500 dark:text-zinc-500Ta5d6ff"Tff7b72>
Supports MP3, OGG, WAV, M4A, FLAC. Will be converted to Opus.
Tff7b72</p>
Tff7b72</div>
T8b949e<!-- Delays -->
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffgrid grid-cols-2 gap-4Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<label Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-bold text-gray-500 dark:text-zinc-400 uppercase tracking-tighterTa5d6ff"
Tff7b72>Answer Delay (s)Tff7b72</label
>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.voicemail_auto_answer_delay_secondsTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffnumberTa5d6ff"
Te6edf3min=Ta5d6ff"Ta5d6ff1Ta5d6ff"
Te6edf3max=Ta5d6ff"Ta5d6ff120Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffblock w-full rounded-lg border-0 py-1.5 text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-zinc-800 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm dark:bg-zinc-900Ta5d6ff"
@Te6edf3change=Ta5d6ff"
Ta5d6ff Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate-configTa5d6ff'Ta5d6ff, {
voicemail_auto_answer_delay_seconds: Number(Te6edf3$event.target.valueTa5d6ff),
})
Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-2Ta5d6ff"Tff7b72>
Tff7b72<label Te6edf3class=Ta5d6ff"Ta5d6fftext-xs font-bold text-gray-500 dark:text-zinc-400 uppercase tracking-tighterTa5d6ff"
Tff7b72>Max Recording (s)Tff7b72</label
>
Tff7b72<input
Te6edf3:value=Ta5d6ff"Ta5d6ffconfig.voicemail_max_recording_secondsTa5d6ff"
Te6edf3type=Ta5d6ff"Ta5d6ffnumberTa5d6ff"
Te6edf3min=Ta5d6ff"Ta5d6ff5Ta5d6ff"
Te6edf3max=Ta5d6ff"Ta5d6ff600Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffblock w-full rounded-lg border-0 py-1.5 text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-zinc-800 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm dark:bg-zinc-900Ta5d6ff"
@Te6edf3change=Ta5d6ff"
Ta5d6ff Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffupdate-configTa5d6ff'Ta5d6ff, {
voicemail_max_recording_seconds: Number(Te6edf3$event.target.valueTa5d6ff),
})
Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72</div>
Tff7b72</div>
Tff7b72</div>
Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6ffvoicemails.length === 0Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffmy-auto text-centerTa5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffbg-gray-200 dark:bg-zinc-800 p-6 rounded-full inline-block mb-4Ta5d6ff"Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffvoicemailTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-12 text-gray-400Ta5d6ff" Tff7b72/>
Tff7b72</div>
Tff7b72<h3 Te6edf3class=Ta5d6ff"Ta5d6fftext-lg font-medium text-gray-900 dark:text-whiteTa5d6ff"Tff7b72>No VoicemailsTff7b72</h3>
Tff7b72<p Te6edf3class=Ta5d6ff"Ta5d6fftext-gray-500 dark:text-zinc-400Ta5d6ff"Tff7b72>When people leave you messages, they'll show up here.Tff7b72</p>
Tff7b72</div>
Tff7b72<div v-else Te6edf3class=Ta5d6ff"Ta5d6ffspace-y-4Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffborder-b border-gray-200 dark:border-zinc-800 overflow-hiddenTa5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffpx-4 py-3 border-b border-gray-200 dark:border-zinc-800 flex justify-between items-centerTa5d6ff"Tff7b72>
Tff7b72<h3 Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-bold text-gray-900 dark:text-white uppercase tracking-widerTa5d6ff"Tff7b72>
Voicemail Inbox
Tff7b72</h3>
Tff7b72<span
Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 px-2 py-0.5 rounded-full font-bold uppercaseTa5d6ff"
Tff7b72>
{{ voicemails.length }} Messages
Tff7b72</span>
Tff7b72</div>
Tff7b72<ul Te6edf3class=Ta5d6ff"Ta5d6ffdivide-y divide-gray-100 dark:divide-zinc-800Ta5d6ff"Tff7b72>
Tff7b72<li
Te6edf3v-for=Ta5d6ff"Ta5d6ffvoicemail in voicemailsTa5d6ff"
Te6edf3:key=Ta5d6ff"Ta5d6ffvoicemail.idTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffpx-4 py-4 hover:bg-gray-50 dark:hover:bg-zinc-800/50 transition-colorsTa5d6ff"
Te6edf3:class=Ta5d6ff"Ta5d6ff{ Ta5d6ff'Ta5d6ffbg-blue-50/50 dark:bg-blue-900/10Ta5d6ff'Ta5d6ff: !voicemail.is_read }Ta5d6ff"
Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-start space-x-4Ta5d6ff"Tff7b72>
T8b949e<!-- Icon / Play/Pause Button -->
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffrelative shrink-0Ta5d6ff"Tff7b72>
Tff7b72<LxmfUserIcon
Te6edf3:custom-image=Ta5d6ff"Ta5d6ffgetContactByHash(voicemail.remote_identity_hash)?.custom_imageTa5d6ff"
Te6edf3:icon-name=Ta5d6ff"Ta5d6ffvoicemail.remote_icon ? voicemail.remote_icon.icon_name : Ta5d6ff'Ta5d6ff'Ta5d6ff"
Te6edf3:icon-foreground-colour=Ta5d6ff"
Ta5d6ff voicemail.remote_icon ? voicemail.remote_icon.foreground_colour : Ta5d6ff'Ta5d6ff'
Ta5d6ff Ta5d6ff"
Te6edf3:icon-background-colour=Ta5d6ff"
Ta5d6ff voicemail.remote_icon ? voicemail.remote_icon.background_colour : Ta5d6ff'Ta5d6ff'
Ta5d6ff Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffsize-10Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex-1 min-w-0Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center justify-between mb-1Ta5d6ff"Tff7b72>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center min-w-0 mr-2Ta5d6ff"Tff7b72>
Tff7b72<p Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-bold text-gray-900 dark:text-white truncateTa5d6ff"Tff7b72>
{{ voicemail.remote_identity_name || Te6edf3$t("call.unknown") }}
Tff7b72</p>
Tff7b72<span
Te6edf3v-if=Ta5d6ff"Ta5d6ff!voicemail.is_readTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6ffml-2 shrink-0 size-2 inline-block rounded-full bg-blue-500Ta5d6ff"
Tff7b72>Tff7b72</span>
Tff7b72</div>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] text-gray-500 dark:text-zinc-500 font-mono shrink-0Ta5d6ff"Tff7b72>
{{ formatDateTime(voicemail.timestamp * 1000) }}
Tff7b72</span>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center text-xs text-gray-500 dark:text-zinc-400 space-x-3 mb-3Ta5d6ff"Tff7b72>
Tff7b72<span Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-1Ta5d6ff"Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffclock-outlineTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-3Ta5d6ff" Tff7b72/>
{{ formatDuration(voicemail.duration_seconds) }}
Tff7b72</span>
Tff7b72<span
Te6edf3class=Ta5d6ff"Ta5d6ffopacity-60 font-mono text-[10px] truncate cursor-pointer hover:text-blue-500 transition-colorsTa5d6ff"
Te6edf3:title=Ta5d6ff"Ta5d6ffvoicemail.remote_identity_hashTa5d6ff"
@click.Te6edf3stop=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffcopy-hashTa5d6ff'Ta5d6ff, voicemail.remote_identity_hash)Ta5d6ff"
Tff7b72>{{ formatDestinationHash(voicemail.remote_identity_hash) }}Tff7b72</span
>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffmb-4Ta5d6ff"Tff7b72>
Tff7b72<AudioWaveformPlayer
Te6edf3:src=Ta5d6ff"Ta5d6ff`/api/v1/telephone/voicemails/Tff7b72${Te6edf3voicemailTff7b72.Td2a8ffidTff7b72}Ta5d6ff/audio`Ta5d6ff"
@Te6edf3play=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffmark-readTa5d6ff'Ta5d6ff, voicemail)Ta5d6ff"
Tff7b72/>
Tff7b72</div>
Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffflex items-center gap-4Ta5d6ff"Tff7b72>
Tff7b72<button
Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] flex items-center gap-1 text-gray-500 hover:text-blue-500 font-bold uppercase tracking-wider transition-colorsTa5d6ff"
@Te6edf3click=Ta5d6ff"
Ta5d6ff Te6edf3$emitTa5d6ff(
Ta5d6ff'Ta5d6ffcall-backTa5d6ff'Ta5d6ff,
voicemail.remote_telephony_hash ||
voicemail.remote_destination_hash ||
voicemail.remote_identity_hash
)
Ta5d6ff"
Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffphoneTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-3Ta5d6ff" Tff7b72/>
Call Back
Tff7b72</button>
Tff7b72<a
Te6edf3:href=Ta5d6ff"Ta5d6ff`/api/v1/telephone/voicemails/Tff7b72${Te6edf3voicemailTff7b72.Td2a8ffidTff7b72}Ta5d6ff/audio`Ta5d6ff"
Te6edf3:download=Ta5d6ff"Ta5d6ff`voicemail_Tff7b72${Te6edf3voicemailTff7b72.Td2a8ffidTff7b72}Ta5d6ff.opus`Ta5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] flex items-center gap-1 text-gray-500 hover:text-blue-500 font-bold uppercase tracking-wider transition-colorsTa5d6ff"
Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffdownloadTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-3Ta5d6ff" Tff7b72/>
Download
Tff7b72</a>
Tff7b72<button
Te6edf3type=Ta5d6ff"Ta5d6ffbuttonTa5d6ff"
Te6edf3class=Ta5d6ff"Ta5d6fftext-[10px] flex items-center gap-1 text-red-500 hover:text-red-600 font-bold uppercase tracking-wider transition-colorsTa5d6ff"
@Te6edf3click=Ta5d6ff"Te6edf3$emitTa5d6ff(Ta5d6ff'Ta5d6ffdeleteTa5d6ff'Ta5d6ff, voicemail.id)Ta5d6ff"
Tff7b72>
Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"Ta5d6ffdeleteTa5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffsize-3Ta5d6ff" Tff7b72/>
Delete
Tff7b72</button>
Tff7b72</div>
Tff7b72</div>
Tff7b72</div>
Tff7b72</li>
Tff7b72</ul>
Tff7b72</div>
Tff7b72</div>
Tff7b72</div>
Tff7b72</template>
Tff7b72<scriptTff7b72>
import MaterialDesignIcon from "../../MaterialDesignIcon.vue";
import LxmfUserIcon from "../../LxmfUserIcon.vue";
import AudioWaveformPlayer from "../../messages/AudioWaveformPlayer.vue";
export default {
name: "CallVoicemailTab",
components: {
MaterialDesignIcon,
LxmfUserIcon,
AudioWaveformPlayer,
},
props: {
active: {
type: Boolean,
default: false,
},
voicemailSearch: {
type: String,
default: "",
},
config: {
type: Object,
default: null,
},
voicemailStatus: {
type: Object,
default: () => ({}),
},
voicemails: {
type: Array,
default: () => [],
},
isGeneratingGreeting: {
type: Boolean,
default: false,
},
isUploadingGreeting: {
type: Boolean,
default: false,
},
isPlayingGreeting: {
type: Boolean,
default: false,
},
getContactByHash: {
type: Function,
required: true,
},
formatDateTime: {
type: Function,
required: true,
},
formatDuration: {
type: Function,
required: true,
},
formatDestinationHash: {
type: Function,
required: true,
},
},
emits: [
"update:voicemailSearch",
"search-input",
"update-config",
"patch-config",
"save-and-generate",
"upload-greeting",
"start-recording-greeting",
"stop-recording-greeting",
"delete-greeting",
"play-greeting",
"copy-hash",
"mark-read",
"call-back",
"delete",
],
data() {
return {
isVoicemailSettingsExpanded: false,
};
},
methods: {
onSearchInput(event) {
this.$emit("update:voicemailSearch", event.target.value);
this.$emit("search-input");
},
},
};
Tff7b72</script>
Served by rngit 1.5.2 - Generated in 0.04s